import React, { useState, useEffect } from 'react';
import Taro from '@tarojs/taro';
import {View, Image, Text} from '@tarojs/components';
import {IndexDiyModule, IndexDiyModuleLimit} from 'src/utils/server.interface';
import {AtProgress} from 'taro-ui';
import CountDown1 from '../../../components/count-down/count-down-1';
import {gotoPage} from '../../../utils/tools';
import Float from '../../../components/float/float';
import RightArrow from "../../../components/icon/right-arrow";
import {platform} from "../../../utils/platform-settting.service";
import './index-sale-limit-4.scss';

const defaultProps: IndexDiyModule = {
  name: '',
  moreUrl: '',
  data: [],
  type: ''
}

const IndexSaleLimit4: React.FC<IndexDiyModule<IndexDiyModuleLimit[]>> = (props) => {
  const [goods, setGoods] = useState<IndexDiyModuleLimit[]>([])
  useEffect(() => {
    if (props.data && props.data.length > 0) {
      const goodData: any = props.data
      goodData.forEach(item => {
        if (item.status === 0) {
          item['status'] = -1;
        } else {
          if (item.nowTime < item.beginTime) {
            item['status'] = 0
          } else if (item.nowTime < item.endTime) {
            item['status'] = 1
          } else {
            item['status'] = 99
          }
        }
      });
      setGoods(goodData)
    }
  }, [props.data])

  return (
    <View className='quickRoot-four index-sale-box' style={`background-color:${this.props.color || '#fd0541'}`}>
      {(props.name || props.moreUrl) && <View className='title-box'>
        <View className='title'>{props.name}</View>
        {!!props.moreUrl && <View className='more' onClick={() => gotoPage(props.moreUrl)}>
          <Text>更多</Text>
          <RightArrow />
        </View>}
      </View>}
      {!props.name && !props.moreUrl && <View style='height: 4px' />}
      <View className='content'>
        {goods.length > 0 && goods.map((ce: any, i) => <View key={ce.id} className='item'
          onClick={()=>{Taro.navigateTo({url: ce.url})}}
        >
          <View className='image'>
            <Image src={ce.img} mode='aspectFill' className='img' />
            <View className={`label ${i === 0 ? 'secondary' : ''}${i >= 0 ? 'third' : ''}`}>TOP<Text
              decode
            >&nbsp;{i + 1}</Text></View>
          </View>
          {!!ce.is_free_visit && (process.env.P_ENV === 'vc' || process.env.P_ENV === 'kunxin') ?
            <View className='item-right'>
              <View className='item-title'>{ce.name}</View>
            </View> : <View className='item-right'>
              <View className='item-title'>{ce.name}</View>
              <View className='info-box'>
                <View className='info-left'>
                  {ce.status === 1 &&
                  <AtProgress percent={100 - ce.progress} color='#ec5a50' stroke-width='16rpx' />}
                  {!!ce.price && <View className='price-box'>
                    <View>
                      <Text className='symbol'>¥</Text>
                      <View className='price inline'>
                        <Float value={ce.price} />
                      </View>
                    </View>
                  </View>
                  }
                </View>
                {ce.status >= 0 && ce.status < 99 && <View className='buy'>抢购</View>}
                {ce.status === -1 && <View className='buy' style='background:#a9a9a9;'>售罄</View>}
              </View>
              {ce.status === 99 && <View className='time-info'>您来晚了，商品已被抢光～</View>}
              {ce.status === 1 && <View className='time-info'><CountDown1 type='end' time={ce.endTime} /></View>}
              {ce.status === 0 && <View className='time-info'><CountDown1 type='start' time={ce.beginTime} /></View>}
              {ce.status === 1 &&
                <View style='display: flex;justify-content: space-between;'>
                  {!!platform.info.is_show_sales_volume && !!ce.salesVolume && <Text className='salesVolume'>销量：{ce.salesVolume}笔</Text>}
                  {process.env.TARO_ENV !== 'tt' && !!platform.info.is_show_stock && !!ce.stock && <Text className='salesVolume'>库存：{ce.stock}</Text>}
                  {process.env.TARO_ENV === 'tt' && !!ce.stock && <Text className='salesVolume'>库存：{ce.stock}</Text>}
                </View>
              }
            </View>
          }
        </View>)}
      </View>
    </View>
  )
}

IndexSaleLimit4.defaultProps = defaultProps

export default IndexSaleLimit4
